<!--
 * @Author: zhw 443844039@qq.com
 * @Date: 2025-08-02 19:31:17
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-11 20:45:20
 * @FilePath: \project\lingyuxx-jxjsdad\ruoyi-ui\src\views\workbench\components\WorkbenchHeader.vue
 * @Description: 工作台头部组件，包含欢迎信息和统计数据
-->
<template>
  <div class="header-row">
    <div class="header-card">
      <div class="header-content">
        <div class="logo-section">
          <img 
            src="@/assets/workbench/user.png" 
            alt="教师教学档案袋平台" 
            class="logo-img"
          >
          <div class="welcome-text">
            <h2>欢迎您登录教师教学档案袋平台，祝你开心每一天！</h2>
            <p>构建教师教学档案袋系统，赋能学院管理与教师成长。</p>
          </div>
        </div>
        
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-label">总登录</div>
            <div class="stat-value">56</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="stat-item">
            <div class="stat-label">校内排名</div>
            <div class="stat-value">8/ <span style="color: #8D8D8D;font-family: 'ArialMT', 'Arial', sans-serif;font-size: 20px;">124</span></div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="stat-item">
            <div class="stat-label">活跃课程数</div>
            <div class="stat-value">2,223</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkbenchHeader',
  data() {
    return {
      // 头部组件相关数据可在此定义
    }
  }
}
</script>

<style scoped>
.header-row {
  margin-bottom: 12px;
}

.header-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 300px;
}

.logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

.welcome-text h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.welcome-text p {
  font-size: 14px;
  color: #666;
}

.stats-grid {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 300px;
  align-items: center;
}

.stat-item {
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #929292;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 30px;
  color: #272727;
}

::v-deep .el-divider--vertical{
  height: 2em;
}
</style>
